<template>
  <div class="complete" v-if="baseStore.flagComplete">
    <div class="cnt">
      <div class="txt">Complete</div>
      <div class="btn-reset">
        <IconReset size="36px" @mousedown="handlerClickBtnReset" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useBaseStore } from '../stores/base.ts'
import IconReset from '../svg/IconReset.vue'
const baseStore = useBaseStore()
const handlerClickBtnReset = () => {
  baseStore.flagComplete = false
}
</script>
<style lang="scss" scoped>
@import '../scss/constant.scss';
.complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;

  .txt {
    font-size: 1rem;
    font-family: 'Times New Roman', Times, serif;
  }
  body.shade & {
    border-color: $color-shade;
  }
  .cnt {
    text-align: center;
  }
  .btn-reset {
    font-size: 1rem;
  }
}
</style>
